<template>
  <view class="topBar" :style="{paddingTop:menuButton.top + 'px',position:position}">
		<view class="header" :style="{height:menuButton.height + 'px',paddingRight:menuButton.height + 'px'}">
			<view class="backWrapper">
				<view class="back" v-if="showback" @tap="goback">
					<image class="backIcon" :src="getUrl('/back.png')" mode="aspectFit"></image>
				</view>
			</view>
			<view class="title">
				{{title}}
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onReady } from '@dcloudio/uni-app';
import { ref } from 'vue'
import { getUrl } from '@/utils/imagePlugin'
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  showback: {
    type: Boolean,
    default: false
  },
  position: {
    type: String,
    default: 'relative'
  }
})
const goback = () => {
  uni.navigateBack()
}
let menuButton = ref<{ height : Number, top : Number, }>({ height: 0, top: 0, })
onReady(() => {
  const { height, top } = uni.getMenuButtonBoundingClientRect()
  menuButton.value = { height, top, }
})
</script>

<style lang="scss" scoped>
	.topBar {
		$fontSize: 32rpx;
		$iconSize: calc($fontSize + 4rpx);
		z-index: 9;

		width: 100%;
		padding-bottom: calc($fontSize / 2);

		.header {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;

			.backWrapper {
				height: 100%;
				aspect-ratio: 1 / 1;
			}

			.back {
				height: 100%;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.backIcon {
					width: $iconSize;
					height: $iconSize;
				}
			}

			.title {
				margin: 0 auto;
				font-size: $fontSize;
				color: #ffffff;
			}
		}
	}
</style>
